গুগল ম্যাপসে multiple markers যোগ করা এবং সেগুলোকে কার্যকরভাবে পরিচালনা করা একটি সাধারণ কিন্তু গুরুত্বপূর্ণ কাজ। এটি বিশেষ করে যখন আপনি একটি মানচিত্রে একাধিক স্থান চিহ্নিত করতে চান, তখন এটি সাহায্য করে। যেমন, বিভিন্ন শহর, ব্যবসা প্রতিষ্ঠান, ট্যুরিস্ট স্পট বা অন্যান্য স্থান।
Multiple Markers যোগ করা
Google Maps API ব্যবহার করে একাধিক মার্কার যোগ করা খুবই সহজ। আপনি যদি একাধিক স্থানে মার্কার স্থাপন করতে চান, তাহলে প্রতিটি স্থানের জন্য একটি google.maps.Marker অবজেক্ট তৈরি করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একাধিক মার্কার যোগ করা হয়েছে।
উদাহরণ কোড: Multiple Markers যোগ করা
<!DOCTYPE html>
<html>
<head>
<title>Multiple Markers Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<style>
/* মানচিত্রের সাইজ */
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Multiple Markers on Google Map</h3>
<div id="map"></div>
<script>
function initMap() {
// মানচিত্রের জন্য একটি কেন্দ্র নির্বাচন করা
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 23.8103, lng: 90.4125} // ঢাকার কেন্দ্রে
});
// একাধিক স্থান এবং তাদের অবস্থান (latitude, longitude)
var locations = [
{lat: 23.8103, lng: 90.4125, title: "Dhaka"},
{lat: 22.3581, lng: 91.7832, title: "Chittagong"},
{lat: 24.3635, lng: 88.6241, title: "Rajshahi"}
];
// একাধিক মার্কার তৈরি করা
locations.forEach(function(location) {
var marker = new google.maps.Marker({
position: {lat: location.lat, lng: location.lng},
map: map,
title: location.title
});
});
}
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- মানচিত্র তৈরি: প্রথমে একটি মানচিত্র তৈরি করা হয় এবং তার কেন্দ্র (center) ঢাকার (Dhaka) অবস্থান দিয়ে নির্ধারণ করা হয়।
- মার্কার ডাটা:
locationsঅ্যারে ব্যবহার করা হয়েছে যেখানে প্রতিটি স্থান (Dhaka, Chittagong, Rajshahi) এবং তাদের অবস্থান (latitude এবং longitude) রয়েছে। - Markers তৈরি:
forEachলুপের মাধ্যমেgoogle.maps.Markerতৈরি করা হয়েছে, যা মানচিত্রে ওই সমস্ত স্থানে মার্কার স্থাপন করবে। মার্কারের শিরোনাম (title) প্রতিটি স্থানের নাম হিসেবে প্রদর্শিত হবে।
Multiple Markers পরিচালনা (Managing Multiple Markers)
এখন, আপনি যখন একাধিক মার্কার ব্যবহার করেন, তখন মার্কারগুলোর উপর বিভিন্ন কার্যকলাপ পরিচালনা করতে পারেন। যেমন, মার্কার ক্লিক করলে একটি ইনফো উইন্ডো (InfoWindow) প্রদর্শন করা বা মার্কারের অবস্থান পরিবর্তন করা।
উদাহরণ কোড: Multiple Markers এর জন্য InfoWindow যুক্ত করা
<!DOCTYPE html>
<html>
<head>
<title>Multiple Markers with InfoWindow</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Multiple Markers with InfoWindow Example</h3>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 23.8103, lng: 90.4125}
});
var locations = [
{lat: 23.8103, lng: 90.4125, title: "Dhaka", content: "This is Dhaka"},
{lat: 22.3581, lng: 91.7832, title: "Chittagong", content: "This is Chittagong"},
{lat: 24.3635, lng: 88.6241, title: "Rajshahi", content: "This is Rajshahi"}
];
var infowindow = new google.maps.InfoWindow();
locations.forEach(function(location) {
var marker = new google.maps.Marker({
position: {lat: location.lat, lng: location.lng},
map: map,
title: location.title
});
// মার্কারের উপর ক্লিক করলে ইনফো উইন্ডো প্রদর্শন
marker.addListener('click', function() {
infowindow.setContent(location.content);
infowindow.open(map, marker);
});
});
}
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- InfoWindow তৈরি: একটি
google.maps.InfoWindowঅবজেক্ট তৈরি করা হয়েছে, যা ব্যবহারকারীর কাছে তথ্য প্রদর্শন করবে। - Marker Listener: প্রতিটি মার্কারের জন্য
clickইভেন্ট লিসেনার যোগ করা হয়েছে। যখন ব্যবহারকারী মার্কারের উপর ক্লিক করবেন, তখন সংশ্লিষ্টInfoWindowদেখাবে এবং সেই মার্কারের সাথে সংযুক্ত তথ্য প্রদর্শিত হবে।
Multiple Markers পরিচালনার আরো কিছু কার্যকলাপ
- মার্কারগুলি ক্লাস্টার করা (Marker Clustering): যখন অনেক মার্কার থাকে, তখন এগুলো ক্লাস্টার করে দেখানো যায়, যাতে মানচিত্রটি আরও পরিষ্কার থাকে এবং ব্যবহারকারী সহজে দেখতে পারে। এটি বিশেষ করে বড় শহর বা এলাকা প্রদর্শনের সময় ব্যবহৃত হয়।
- মার্কারগুলো সরানো (Moving Markers): আপনি চাইলে মার্কারের অবস্থান পরিবর্তন (move) করতে পারেন। এর জন্য
setPosition()ফাংশন ব্যবহার করা হয়। - মার্কার অপসারণ (Removing Markers): যদি আপনি কোনো মার্কার সরাতে চান, তবে
setMap(null)ফাংশন ব্যবহার করে মার্কারটি মানচিত্র থেকে মুছে ফেলতে পারেন।
সারাংশ
Multiple Markers যোগ করা এবং তাদের পরিচালনা একটি সাধারণ কিন্তু গুরুত্বপূর্ণ কাজ যখন আপনি একাধিক স্থান চিহ্নিত করতে চান। Google Maps API এর মাধ্যমে আপনি সহজেই একাধিক মার্কার যোগ করতে পারেন, তাদের উপর ক্লিক করলে ইনফো উইন্ডো প্রদর্শন করতে পারেন এবং অন্যান্য কার্যকলাপ পরিচালনা করতে পারেন, যা ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং কার্যকরী মানচিত্র প্রদান করে।
Read more
